<template>
    <div id="right">     
        <div :class="{box:!(furniture.onOff%2),boxNew:furniture.onOff%2}"  v-for="(furniture,idx) in furnitureList" :key="furniture.name" >
            <div>
                <div>{{furniture.name}}</div> 
                <div class="btnBox" @click="changeColor(idx)">
                    <p :class="{btn:!(furniture.onOff%2),btnNew:furniture.onOff%2}" ></p>
                </div>
            </div>
            <div>
                <h2>Smart Tv</h2>
                <h4>Pannasonlc</h4>
            </div> 
        </div>                
    </div>
    
</template>

<script>

import api from '@/api';
import axios from 'axios';
  export default {


    mounted(){
            axios.get("http://127.0.0.1:8080/api/furnitures/sss")
            .then((result)=>{
                console.log(result)
                console.log(result.data.resultData)
                this.furnitureList=result.data.resultData
                console.log("----------");
                console.log(this.furnitureList);
                console.log(this.n++);
            })
    },
    
      data(){
            return{
            furnitureList:[],
         }
          
      },
  
      methods:{
          changeColor(index){
            
              this.furnitureList[index].onOff++;
              console.log(this.furnitureList[index])
          }
      }
  
  }
  </script>
  
  <style scoped>
       #right{
              
              height: 813px; width:100% 
          }
       #up{
           text-align: right;
           height: 10%;
            width: 100%;
          }
          .box{
              display: inline-block;
              width: 150px;
              height: 132px;
              background-color: #f1eded;
              margin: 50px;
              border-radius: 12%;
              flex-direction: row;
              padding: 10px;
              box-sizing: border-box;
              transition:all .9s;
          }
          .box>div{
              width: 100%;
              height: 50%;
          }
          .boxNew>div{
              width: 100%;
              height: 50%;
          }
          .box>div>h2{
              color: #7e8cb1;
              font-size: 18px;
              margin: 0;
          }
          .boxNew>div>h2{
              color: #7e8cb1;
              font-size: 18px;
              margin: 0;
          }
          .box>div>h4{
              color: #9da8c4;
              margin: 0;
          }
          .boxNew>div>h4{
              color: #9da8c4;
              margin: 0;
          }
          .box>div:first-child{
              display: flex;
              justify-content: space-between;
          }
          .boxNew>div:first-child{
              display: flex;
              justify-content: space-between;
          }
          .box div .btnBox{
              background-color: #d4e2fd;
              width: 40px;
              border-radius: 20px;
              height: 20px
          }
          .boxNew div .btnBox{
              background-color: #d4e2fd;
              width: 40px;
              border-radius: 20px;
              height: 20px
          }
           .btn{
              width: 20px;
              height: 20px;
              background-color: #2666de;
              margin: 0;
              padding: 0;
              display: block;
              border-radius: 20px;
              transform:translate(0,0);
              transition:all .5s;
          }
  
          .btnNew{
              width: 20px;
              height: 20px;
              background-color:  #FFFFFF;
              margin: 0;
              padding: 0;
              display: block;
              border-radius: 20px;
              transform:translate(20px,0);
              transition:all .5s;   
          }
  
          .boxNew{
              display: inline-block;
              width: 150px;
              height: 132px;
              background-color: #2666de;
              margin: 50px;
              border-radius: 12%;
              flex-direction: row;
              padding: 10px;
              box-sizing: border-box;
              transition:all .9s;
          }
  </style>